@import './reset';
::-webkit-input-placeholder { color:#999; }
body{
	background: #F5F8FA;
}
.container{
	width: 100%;
	background: white;
	overflow: hidden;
	box-sizing: border-box;
	>h1{
		width: 100%;
		height: calculateRem(24px);
		font-size: calculateRem(18px);
		color: #e11f51;
		text-align: center;
		margin: calculateRem(10px) 0 0;
	}
	.process-wrap{
		width: 100%;
		height: auto;
		padding: calculateRem(22px) 0 calculateRem(30px);
		border-bottom: 1px solid #eee;
		.process-inner{
			width: 76%;
			height: auto;
			margin-left: 23%;
			box-sizing: border-box;
			border-left: 3px solid #e41857;
			.process-cell{
				width: 100%;
				height: auto;
				box-sizing: border-box;
				padding:0 calculateRem(11px) calculateRem(12px);
				position: relative;
				>h2{
					width: 100%;
					height: calculateRem(30px);
					line-height: calculateRem(30px);
					color: #141517;
					font-size: calculateRem(17px);
					margin: 0;
					margin-bottom: calculateRem(5px);
				}
				.content{
					width: 100%;
					height: auto;
					line-height: calculateRem(20px);
					font-size: calculateRem(13px);
					color: #141517;
					box-sizing: border-box;
				}
				.dot{
					position: absolute;
					width: calculateRem(13px);
					height: calculateRem(14px);
					box-sizing: border-box;
					border: 3px solid #e41857;
					background: white;
					top: calculateRem(6px);
					left: calculateRem(-8px);

				}
				.tip-word{
					position: absolute;
					line-height: calculateRem(16px);
					font-size: calculateRem(12px);
					color: #e41857;
					width: calculateRem(56px);
					height: auto;
					top: 0;
					left: calculateRem(-64px);
					text-align: center;
					font-weight: bold;
				}
				.big{
					line-height: calculateRem(32px);
					font-size: calculateRem(21px);
				}
				&:first-child{
					&:before{
						content: '';
						display: inline-block;
						width: 3px;
						height: 10px;
						background: white;
						position: absolute;
						left: -3px;
					};
				}
				&:last-child{
					&:before{
						content: '';
						display: inline-block;
						width: 3px;
						/*height: 10px;*/
						background: white;
						position: absolute;
						left: -3px;
						bottom: 0;
						top: 10px;
					};
				}
				
			}

		}
	}

	.blank{
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: calculateRem(10px) 0 calculateRem(30px);
		border-bottom: 1px solid #eee;
		>h2{
			width: 100%;
			height: calculateRem(66px);
			line-height: calculateRem(66px);
			text-align: center;
			font-size: calculateRem(20px);
			margin: 0;
			color: #141517;
		}
		.t-wrap{
			width: 100%;
			height: auto;
			box-sizing: border-box;
			padding: 0 calculateRem(16px);
			.t-cell{
				width: 100%;
				height: auto;
				font-size: 0;
				.t-l{
					display: inline-block;
					width: 25%;
					height: auto;
					color: #ec1453;
					font-size: calculateRem(14px);
					line-height: calculateRem(22px);
					vertical-align: top;
					font-weight: bold;
				}
				.t-r{
					display: inline-block;
					width: 75%;
					height: auto;
					line-height: calculateRem(18px);
					font-size: calculateRem(12px);
					color: #1e1f21;  
					@include break;

				}
			}
		}
		.end{
			width: 100%;
			color: #999;
			font-size: calculateRem(13px);
			text-align: center;
			margin-top: calculateRem(20px);
		}
		
	}

	.underline{
		text-decoration: underline;
		text-decoration-color: #e11f51;
		text-underline-position: under;
	}

}